<template>

    <div class="search-container">


        <div class="search-container">
            <div class="search-text">
                <el-input
                        placeholder="请输入检索关键词"
                        prefix-icon="el-icon-search"
                        v-model="searchKey"
                        clearable
                        maxlength="10"
                        show-word-limit
                        @keyup.enter.native="findSearchList()"
                        style="width:250px"
                >
                </el-input>
            </div>

            <div class="search-content">
                <div class="search-header">
                    <span>检索结果：</span>
                </div>

                <hr>
                <div v-if="searchList != null">
                    <div class="search-module" v-for="(searchContent,index) in searchList" :key="index">
                        <el-button type="text">
                            <div class="search-title" @click="showDetail(searchContent.id,searchContent.chapterId)">
                                <span v-html="searchContent.title"></span>
                            </div>
                        </el-button>
                        <div class="search-msg" v-html="searchContent.content">

                        </div>
                        <div class="search-author">
                        <span class="fa fa-user" aria-hidden="true" title="作者/来源">
                            <span>{{searchContent.author}}</span>
                        </span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="fa fa-calendar" aria-hidden="true" title="最近修改时间">
                            <span>{{searchContent.createTime | formatDate}} </span>
                        </span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="fa fa-eye" aria-hidden="true" title="浏览次数">
                            <span>{{searchContent.watchTime}}</span>
                        </span>
                        </div>
                    </div>

                    <div class="ly-page">
                        <el-pagination layout="total, prev, pager, next, jumper" @current-change="refreshPageRequest"
                                       :current-page="pageIndex" :page-size="pageSize"
                                       :total="totalPage">
                        </el-pagination>
                    </div>

                </div>

                <div class="search-module" v-if="searchList == null || searchList.length == 0">
                    <p> 没有检索到内容！！！ </p>
                </div>

            </div>
        </div>

    </div>

</template>

<script>


    import {formatDate} from "@/utils/mixin.js"

    export default {
        data() {
            return {
                searchKey: "",
                searchList: [],

                pageIndex: 1,
                pageSize: 5,
                totalPage:0,

            }
        },
        methods: {
            // 获取分页数据
            findSearchList: function () {
                if (this.searchKey == '') {
                    this.$message({message: '检索值不可为空！', type: 'warning'})
                    return;
                }
                this.$api.Info.listBySearchKey({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'searchKey': this.searchKey
                }).then((data) => {
                    if (data && data.code === 0) {
                        this.searchList = data.page.list
                        this.$api.Search.save({searchKey: this.searchKey});

                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount
                    }else{
                        this.dataList = []
                        this.totalPage = 0
                    }
                })
            },
            showDetail(idVal, chapterId) {
                this.$router.push({path: '/show/article/detail', query: {id: idVal, chapterId: chapterId}})
            },
            // 换页刷新
            refreshPageRequest: function (pageIndex) {
                this.pageIndex = pageIndex
                this.findSearchList()
            },
        },
        mounted() {
            this.searchKey = this.$route.query.searchKey
            this.findSearchList();
        },
        mixins: [formatDate]

    }

</script>

<style scope>

    .search-container {
        min-height: 500px;
        margin: 0px 100px;
    }

    .search-container > div {
        padding: 30px 0px;
        width: 80%;
    }

    .search-header span {
        font-weight: bolder;
        font-size: 20px;
        color: red;
    }

    /* 搜索内部模块样式  start -- */
    .search-module div {
        margin-top: 10px;
    }

    .search-title {
        font-weight: bold;
    }

    .search-msg {
        margin-left: 20px;
    }

    /* 搜索内部模块样式  end -- */


</style>
